<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-green']" :full-page="true" :isHeaderSized="false">
		<template v-slot:gHeader>
			<view style="height: 44px" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<gui-header-leading :home="false" :backButtonClass="['gui-color-white']"></gui-header-leading>
				<text class="gui-bold gui-flex1 gui-text-center gui-ellipsis gui-color-white" style="margin-bottom: 5rpx; font-size: 16px"></text>
				<view style="width: 70rpx">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe639;</text>
				</view>
				<view style="width: 70rpx">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe624;</text>
				</view>
				<view style="width: 70rpx">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe712;</text>
				</view>
				<view style="width: 70rpx">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe607;</text>
				</view>
				<view style="width: 70rpx" @click="toTable">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe636;</text>
				</view>
				<view style="width: 70rpx" @click="toDoc">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xec17;</text>
				</view>
				<view style="width: 70rpx" @click="addHandle">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe890;</text>
				</view>
				<view style="width: 70rpx" @click="lockHandle">
					<text class="fengdu gui-block gui-color-white gui-bold gui-text" style="font-size: 38rpx">&#xe6e6;</text>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="gui-padding">
				<view class="gui-bg-white gui-padding gui-border-radius">
					<view class="gui-h6 gui-bold">实验方案信息</view>
					<view class="gui-list-items" v-for="(item, idx) of dataRec.preceptList" :key="item.id">
						<text @tap="showMenu(idx)" style="font-size: 38rpx" class="gui-list-arrow-right gui-block gui-icons gui-color-gray">&#xe603;</text>
						<view class="gui-list-body">
							<view class="gui-list-title">
								<text class="gui-list-title-text gui-list-one-line gui-primary-text">{{ item.title }}</text>
								<template v-if="item.type == '5'">
									<gui-image :src="item.shujucontent?.content[0]" mode="aspectFill" :width="120" :height="120" borderRadius="10rpx"></gui-image>
								</template>
								<text v-else class="gui-list-title-text gui-list-one-line gui-primary-text">{{ item.shujucontent?.content }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="gui-bg-white gui-border-radius gui-margin-top">
					<view class="gui-h6 gui-bold gui-padding">实验数据信息</view>
					<view class="gui-flex">
						<view @click="preBtn" class="gui-bg-grey6 gui-flex gui-align-items-center gui-border-radius gui-justify-content-center" style="width: 80rpx">
							<text class="gui-icons gui-block gui-color-grey2 gui-blod gui-text" style="font-size: 38rpx">&#xe600;</text>
						</view>
						<view class="gui-flex1">
							<swiper :current="dataRec.currentSwiperIndex" :disable-touch="true" class="swiper" circular :indicator-dots="false" :autoplay="false">
								<swiper-item v-for="(item, idx) of dataRec.swiperList" :key="idx">
									<view class="gui-flex gui-wrap gui-align-items-center gui-justify-content-center" style="height: 100%">
										<view class="swiperItem gui-text" :class="child.id == dataRec.currentId ? 'active' : ''" v-for="child of item" :key="child.id" @click="changeInfoId(child.id)">
											{{ child.title }}
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view @click="nextBtn" class="gui-bg-grey6 gui-flex gui-align-items-center gui-border-radius gui-justify-content-center" style="width: 80rpx">
							<text class="gui-icons gui-block gui-color-grey2 gui-blod gui-text" style="font-size: 38rpx">&#xe601;</text>
						</view>
					</view>
				</view>
				<view class="gui-bg-white gui-border-radius gui-margin-top">
					<view class="gui-h6 gui-bold gui-padding">实验地/品种</view>
					<view class="gui-flex">
						<view @click="preBtnItem" class="gui-bg-grey6 gui-flex gui-align-items-center gui-border-radius gui-justify-content-center" style="width: 80rpx">
							<text class="gui-icons gui-block gui-color-grey2 gui-blod gui-text" style="font-size: 38rpx">&#xe600;</text>
						</view>
						<view class="gui-flex1">
							<swiper :current="dataRec.currentSwiper2Index" :disable-touch="true" class="swiper" circular :indicator-dots="false" :autoplay="false">
								<swiper-item v-for="(item, idx) of dataRec.originData" :key="item.id">
									<view class="gui-flex gui-column gui-align-items-start gui-justify-content-center" style="height: 100%">
										<view class="gui-flex">
											<view style="width: 260rpx" class="gui-text gui-text-center gui-color-gray">试验品种</view>
											<view class="gui-text">{{ item.pzmc }}</view>
										</view>
										<view class="gui-flex" style="margin-top: 10rpx">
											<view style="width: 260rpx" class="gui-text gui-text-center gui-color-gray">试验场地</view>
											<view class="gui-text">{{ item.name }}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view @click="nextBtnItem" class="gui-bg-grey6 gui-flex gui-align-items-center gui-border-radius gui-justify-content-center" style="width: 80rpx">
							<text class="gui-icons gui-block gui-color-grey2 gui-blod gui-text" style="font-size: 38rpx">&#xe601;</text>
						</view>
					</view>
				</view>
				<view class="gui-margin-top">
					<view class="gui-form-item gui-border-b">
						<view class="gui-form-body">
							<button v-if="dataRec.inputType == '5'" type="default" class="gui-button-mini gui-bg-primary gui-noborder" @click="uploadImage" style="width: 200rpx">
								<text class="gui-color-white gui-button-text-mini">上传图片</text>
							</button>
							<button v-else-if="dataRec.inputType == '3'" type="default" class="gui-button-mini gui-bg-primary gui-noborder" @click="changeSheet" style="width: 200rpx">
								<text class="gui-color-white gui-button-text-mini">选项列表</text>
							</button>
							<input v-else type="text" confirm-type="done" @confirm="submitinput" class="gui-form-input" v-model="dataRec.inputContent" placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
			<gui-action-sheet :width="750" ref="guiactionsheet2" @selected="selected2" title="请选择值" :items="dataRec.actionSheetItemsTmp"></gui-action-sheet>
			<gui-action-sheet :height="600" :width="750" ref="guiactionsheet" @selected="selected" title="请选择表名" :items="dataRec.actionSheetItems"></gui-action-sheet>
		</template>
	</gui-page>
</template>

<script setup>
import { Local } from '@utils/storage.js';
import upLoadFile from '@utils/upLoadFile.js';
import graceJS from '@/Grace6/js/grace.js';
import { shiyan_detailApi, shiyan_suoApi, shujucontent_addApi } from '@api/api.js';
import { reactive, ref, toRefs, onMounted, onActivated } from 'vue';
import { onShow } from '@dcloudio/uni-app';

let guiactionsheet = ref();
let guiactionsheet2 = ref();
let dataRec = reactive({
	resData: {},
	actionSheetItems: [],
	actionSheetItemsTmp: [],
	preceptList: [],
	preceptListInit: [],
	selectIdx: 0,
	swiperList: [],
	currentId: 0,
	listLen: 0,
	currentSwiperIndex: 0,
	currentSwiper2Index: 0,
	originData: [],
	inputContent: '',
	inputType: '1' // 1text 3 pick 5 tupian
});
let showMenu = (idx) => {
	dataRec.selectIdx = idx;
	guiactionsheet.value.open();
};
let selected = (idx) => {
	// 获取原始数据
	let initItem = dataRec.preceptListInit[idx];
	dataRec.preceptList.splice(dataRec.selectIdx, 1, initItem);
};
let toTable = () => {
	uni.navigateTo({
		url: '/pages/experDetails/experDetailsTable?id=' + dataRec.resData.id
	});
};
let toDoc = () => {
	uni.navigateTo({
		url: '/pages/experDetails/experDetailsDoc?id=' + dataRec.resData.id
	});
};
let addHandle = () => {
	// uni.navigateTo({
	// 	url: '/pages/experDetails/experDetailsAdd'
	// });
};

let preBtn = () => {
	let idx = getIdx(dataRec.currentId);
	if (idx) {
		let preId = dataRec.preceptListInit[idx - 1].id;
		changeInputType(idx - 1);
		dataRec.currentId = preId;
		if (idx % 6 == 0) {
			dataRec.currentSwiperIndex -= 1;
		}
		// 切换输入类型
	}
};
let changeInputType = (idx) => {
	dataRec.inputType = dataRec.preceptListInit[idx].type;
	dataRec.actionSheetItemsTmp = JSON.parse(dataRec.preceptListInit[idx].indicators);
};
let changeInfoId = (id) => {
	let idx = getIdx(id);
	changeInputType(idx);
	dataRec.currentId = id;
};
let nextBtn = () => {
	let idx = getIdx(dataRec.currentId);
	let maxidx = dataRec.listLen - 1;
	if (idx != maxidx) {
		let nextId = dataRec.preceptListInit[idx + 1].id;
		changeInputType(idx + 1);
		dataRec.currentId = nextId;
		if (idx % 5 == 0 && idx != 0) {
			dataRec.currentSwiperIndex += 1;
		}
	}
};
let preBtnItem = () => {
	if (dataRec.currentSwiper2Index) {
		dataRec.currentId = 0;
		getsingleData(dataRec.currentSwiper2Index - 1);
		dataRec.currentSwiper2Index = dataRec.currentSwiper2Index - 1;
	}
};
let nextBtnItem = () => {
	let maxidx = dataRec.originData.length - 1;
	if (dataRec.currentSwiper2Index != maxidx) {
		dataRec.currentId = 0;
		getsingleData(dataRec.currentSwiper2Index + 1);
		dataRec.currentSwiper2Index = dataRec.currentSwiper2Index + 1;
	}
};
let selected2 = async (idx) => {
	let layerIdx1 = dataRec.currentSwiper2Index;
	let layerIdx2 = getIdx(dataRec.currentId);
	let req = {
		id: dataRec.resData.id,
		shiyanqk_id: dataRec.originData[layerIdx1].id,
		shujuuser_id: dataRec.currentId,
		content: dataRec.actionSheetItemsTmp[idx]
	};
	let result = await shujucontent_addApi(req);
	if (result.code == 1) {
		dataRec.originData[layerIdx1].shujuuser[layerIdx2].shujucontent = {
			content: dataRec.actionSheetItemsTmp[idx]
		};
		getsingleData(dataRec.currentSwiper2Index);
		dataRec.inputContent = '';
	}
};
let changeSheet = async () => {
	guiactionsheet2.value.open();
};
let uploadImage = async () => {
	let res = await upLoadFile(2);
	let layerIdx1 = dataRec.currentSwiper2Index;
	let layerIdx2 = getIdx(dataRec.currentId);
	let req = {
		id: dataRec.resData.id,
		shiyanqk_id: dataRec.originData[layerIdx1].id,
		shujuuser_id: dataRec.currentId,
		content: res.data.fullurl
	};
	let result = await shujucontent_addApi(req);
	if (result.code == 1) {
		dataRec.originData[layerIdx1].shujuuser[layerIdx2].shujucontent = {
			content: [res.data.fullurl]
		};
		getsingleData(dataRec.currentSwiper2Index);
		dataRec.inputContent = '';
	}
};
let submitinput = async (e) => {
	// 区分文本和图片
	if (e.detail.value != '') {
		let layerIdx1 = dataRec.currentSwiper2Index;
		let layerIdx2 = getIdx(dataRec.currentId);
		let req = {
			id: dataRec.resData.id,
			shiyanqk_id: dataRec.originData[layerIdx1].id,
			shujuuser_id: dataRec.currentId,
			content: e.detail.value
		};
		let res = await shujucontent_addApi(req);
		if (res.code == 1) {
			dataRec.originData[layerIdx1].shujuuser[layerIdx2].shujucontent = {
				content: e.detail.value
			};
			getsingleData(dataRec.currentSwiper2Index);
			dataRec.inputContent = '';
		}
	}
};
let getsingleData = (idx = 0) => {
	dataRec.preceptList = dataRec.originData[idx].shujuuser.slice(0, 5);
	dataRec.preceptListInit = dataRec.originData[idx].shujuuser;
	dataRec.listLen = dataRec.originData[idx].shujuuser.length;
	dataRec.swiperList = resoveSwiperList(dataRec.originData[idx].shujuuser);
	dataRec.actionSheetItems = dataRec.originData[idx].shujuuser.map((item) => {
		return item.title;
	});
	if (dataRec.currentId == 0) {
		dataRec.currentId = dataRec.originData[idx].shujuuser[0].id;
		changeInputType(0);
	}
};
let lockHandle = async () => {
	// 根据目前锁定状态
	let is_suo = dataRec.resData.is_suo == 1 ? 0 : 1;
	let shiyan_id = dataRec.resData.id;
	let res = await shiyan_suoApi({ is_suo, shiyan_id });
	if (res.code == 1) {
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
		dataRec.resData.is_suo = is_suo;
	}
};

onShow(() => {});
onMounted(async () => {
	let res = await shiyan_detailApi();
	let sortlist = Local.get('sortlist');
	if (sortlist) {
		let titleArr = sortlist.map((item) => item.title);
		res.data.shiyanqk_lists.forEach((item) => {
			item.shujuuser.sort((a, b) => {
				let indexA = titleArr.indexOf(a.title) === -1 ? Infinity : titleArr.indexOf(a.title);
				let indexB = titleArr.indexOf(b.title) === -1 ? Infinity : titleArr.indexOf(b.title);
				return indexA - indexB;
			});
		});
	}
	dataRec.resData = res.data;
	dataRec.originData = res.data.shiyanqk_lists;
	getsingleData();
});
// 根据id 获取当前idx
let getIdx = (id) => {
	let idx = dataRec.preceptListInit.findIndex((item) => item.id == id);
	return idx;
};
let resoveSwiperList = (list) => {
	let chunkSize = 6;
	let result = [];
	for (let i = 0; i < list.length; i += chunkSize) {
		let chunk = list.slice(i, i + chunkSize);
		result.push(chunk);
	}
	return result;
};
</script>

<style lang="scss" scoped>
page {
	background: #fafafa;
}
.swiper {
	height: 200rpx;
}
.swiperItem {
	width: 166rpx;
	text-align: center;
}
.swiperItem.active {
	color: #07c160;
}
</style>
